<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: 1px solid #000;
        }
        #contentDiv{
            width: 800px;
            height: 300px;
            margin: auto;
        }
        #textDiv{
            width: 200px;
            height: 100px;
            /*overflow: hidden;!*内容溢出部分隐藏*!*/
            overflow: auto; /*内容没有溢出，正常显示，如果溢出，以滚动条显示*/
        }

        #fontDiv{
            font-family: 楷体; /*字体类型*/
            font-size: 30px; /*字体大小*/
            font-weight: bold; /*字重*/
        }

        #txtDiv{
            text-align: center;/*文本水平对齐方式*/
            letter-spacing: 10px;/*文本中字母之间的间距*/
            text-decoration: line-through;/*underline下划线，line-through穿过线，none没有线条装饰*/
        }

        #bgdiv{
            /*颜色单词表示：red 十六进制表示： #939fa4 最大ff 最小00
            以十进制表示：rgb(255,255,0) 最大255,最小0
            加上透明度的背景色：rgba(255,255,0,0.3) */
            background-color: rgba(255,255,0,0.3);
        }

        #userName{
            background-image: url("../img/SnowPea.gif");/*设置背景图片URL路径*/
            background-size: 25px 20px;/*背景图片大小*/
            /*平铺方式  repeat：x/y都平铺  repeat-x/y:x或y方向平铺
            no-repeat：不做平铺*/
            background-repeat: no-repeat;
            /*背景图片开始的位置*/
            background-position: 140px 0px;
        }

        #imgDiv{
            background-image: url("../img/ms.jpg");
            width: 300px;
            height: 250px;
        }
        #imgDiv:hover{
            background-position: 0px -250px;
        }

        #myImgDiv{
            background-image: url("../img/3.jpg");
            width: 300px;
            height: 300px;
            background-size: 300px 300px;
            /*transition: background-image 1s;*/
            transition:all 1s;
        }
        #myImgDiv:hover{
            background-image: url("../img/5.jpg");
            border-radius: 150px;
        }
    </style>
</head>
<body>
    <!--div样式-->
    <div id="contentDiv"></div>

    <div id="textDiv">
        北国风光<br>
        千里冰封<br>
        万里雪飘<br>
        望长城内外<br>
        唯原莽莽<br>
        大河上下<br>
        顿失滔滔
    </div>

    <!--字体样式-->
    <div id="fontDiv">div内容</div>

    <!--文本样式-->
    <div id="txtDiv">div内容</div>
    <!--超链接去除下划线-->
    <a href="#" style="text-decoration: none">跳转</a><br>

<!--    显示隐藏-->
    <!--元素隐藏同时不占位置-->
    <span style="display: none">aaaa</span>
    <span>bbb</span>
    <!--元素隐藏，并且占位置-->
    <span style="visibility: hidden">ccc</span>
    <span>ddd</span>

    <!--带背景色div-->
    <div id="bgdiv">dfdsafa</div>

    <!--背景图片-->
    <input type="text" id="userName"><br>

    <div id="imgDiv"></div>

    <div style="width: 500px;height: 600px;background-color: yellow">
        <div style="width: 200px;height: 150px;background-color: red;
         margin-left: 20px;margin-top: 10px;margin-bottom: 30px;"></div>
        <div style="width: 200px;height: 150px;background-color: red;
            padding-left: 100px">
            锄禾日当午<br>
            汗滴禾下土
        </div>
        <div style="width: 200px;height: 150px;background-color: red;
            padding-left: 100px;border: 30px solid #000;"></div>
    </div>

    <img src="../img/15.jpg" width="200" height="200" style="transform: rotate(30deg);">

    <div id="myImgDiv"></div>

    <div style="width: 600px;height: 200px;">
        <!--相对定位：相对于原来的位置定位，原来的位置还是被占用-->
        <span style="position: relative;left: 20px;top:30px;">画上荷花和尚画</span>
        <span>海上飞机飞上海</span>

<!--        绝对定位，如果父元素没有定位，相对于浏览器定位。-->
<!--        如果父元素定位，相对于父元素定位-->
        <div style="background-color: red;width:100px;height:150px;
        position: absolute;left: 150px;top: 100px;z-index: 3"></div>
    </div>

    <!--固定定位：当滚动条移动时，始终在指定位置-->
    <div style="background-color: blue;width:100px;height:150px;
        position: fixed;left: 100px;top: 100px;z-index: 2"></div>


</body>
</html>